<template>
  <section class="publish-theme">
    <simple-title title="发布主题" :show="false"></simple-title>
    <div class="inner">
      <div class="main-img" >
        <img :src="img" alt="">
      </div>
      <Form :model="formItem" label-position="right" :label-width="100">
        <FormItem label="上传图片：">
          <Input v-model="avatar" style="width: 300px"></Input>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <Upload action="http://www.hfbb.com/api/common/upload" style="display: inline-block"  :on-success="sucss">
            <Button icon="ios-cloud-upload-outline" type="primary">浏览</Button>
          </Upload>
          <p class="tip">建议使用626*226的图片，支持JPG,PNG,GIF格式，100KB以内。</p>
        </FormItem>
        <RadioGroup v-model="formItem.mode">
        <p class="type">
          <Radio label="1">选择简易主题发布模式</Radio>
        </p>
        <FormItem label="图片URL：">
          <Input v-model="formItem.imgurl" style="width: 300px" @on-blur="blu"></Input>
          <p class="tip pink">选择该选项则无需上传图片</p>
        </FormItem>
        <FormItem label="链接地址：">
          <Input v-model="formItem.url" style="width: 300px"></Input>
          <p class="tip pink">选择该选项则无需上传图片</p>
        </FormItem>
        <p class="type">
          <Radio label="2">选择自编辑主题发布模式（图文混编）</Radio>
        </p>
        </RadioGroup>
        <FormItem label="内容详情：">
          <div id="editorElem"></div>
        </FormItem>
        <p class="type"> <Checkbox v-model="cancommon">勾选允许评论</Checkbox></p>
      </Form>
      <div style="padding-left: 100px">
        <Button type="primary" size="large" style="width: 206px" @click="submit">发布</Button>
      </div>
    </div>
  </section>
</template>

<script>
import E from 'wangeditor'
import SimpleTitle from '../../../components/Title/SimpleTitle'
export default {
  name: 'PublishTheme',
  components: {
      SimpleTitle
  },
   data () {
      return {
          formItem: {},
          type1:false,
          // type2:false,
          cancommon: false,
          avatar:"",
          img:'',
          starttime:'',
          endtime:'',
          isping:'',
          id:'',
          images:'',
          editorContent:'',
          // editorContent1:'',
      }
   },
    created () {
       this.getinfo()
    },
    computed: {

    },
    methods: {
        blu () {
          // console.log()
            this.img = this.formItem.imgurl
            this.images = this.formItem.imgurl
        },
        sucss (response) {
            this.avatar = response.data.url
            this.img = this.$Url+response.data.url
            this.images = response.data.url
        },
        submit () {
            let _this =this
            _this.isping =_this.cancommon ?1:2
            _this.$post('/api/activity/addTheme',
                {
                    token:_this.$token,
                    image:_this.images,
                    mode:_this.formItem.mode,
                    url:_this.formItem.url,
                    content:_this.editorContent,
                    isping:_this.isping,
                    theme_id:_this.id
                }, function (res) {
                    _this.$message.success(res.msg);
                    _this.$router.push({path:'/my/mytheme/list'})
                }, function (errcode, errmsg,err) {
                    console.log(err)
                    console.log(errmsg)
                })
        },
        getinfo () {
            this.id = this.$route.query.id
            let _this =this
            _this.$post('/api/activity/myThemeInfo',
                {
                    theme_id:_this.id
                }, function (res) {
                    console.log(res.data)
                    _this.img = _this.$Url+res.data.image
                    _this.avatar = res.data.image
                    _this.formItem = res.data
                    _this.isping = res.data.isping
                    _this.cancommon = _this.isping==1?true:false
                    _this.editorContent = res.data.content
                    var editor = new E('#editorElem')
                    editor.create()
                    editor.txt.html(_this.editorContent)
                    if(res.data.mode == 1){
                        _this.formItem.imgurl = res.data.image
                        _this.avatar = ''
                    }
                }, function (errcode, errmsg,err) {
                    console.log(err)
                    console.log(errmsg)
                })
        }
    },
    mounted() {
        var editor = new E('#editorElem')
        editor.customConfig.onchange = (html) => {
            this.editorContent = html
        }
        editor.customConfig.uploadImgServer = this.$IUrl  // 上传图片到服务器
        editor.customConfig.uploadFileName = 'file';
        editor.customConfig.uploadImgHooks = {
            customInsert: function (insertImg, result, editor) {
                var url = result.data[0]
                insertImg(url)
            }
        }
        editor.create()

    }
}

</script>

<style lang="less" >
  @import "../../../style/style.less";
  .publish-theme {
    border: 1px solid @border-color;
    padding: 15px !important;
    .inner {
      padding-top: 15px;
      .ivu-upload-list{
        display: none;
      }
      .main-img {
        border: 1px solid @border-color;
        padding: 10px;
        line-height: 1;
        font-size: 0;
        margin-bottom: 20px;
        width: 668px;
        height: 248px;
        img {
          width: 100%;
          height: 226px;
          border-radius: 8px;
        }
      }
      .type{
        font-size: 20px;
        color: #666;
        margin-bottom: 15px;
        padding-left: 25px;
      }
    }
  }
</style>
